<template>
  <div
    v-loading="loading"
    :element-loading-text="$store.state.loading.text"
    :element-loading-spinner="$store.state.loading.spinner"
    :element-loading-background="$store.state.loading.background"
    class="approve-history"
  >
    <div v-if="activities && activities.length > 0">
      <el-steps
        :active="activeIndex"
        :space="150"
        align-center
        style="margin-bottom: 20px"
      >
        <el-step
          v-for="(item, index) in stepsList"
          :key="index"
          :title="item.name"
          :icon="item.icon"
        >
          <template #description>
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.remark || item.statusShowText"
              placement="top-start"
            >
              <div class="description">
                <div class="status">
                  {{ item.statusShowText }}
                </div>
                <div class="createTime">
                  {{ item.createTime }}
                </div>
              </div>
            </el-tooltip>
          </template>
        </el-step>
      </el-steps>
      <div class="show-detail">
        <span class="pointer">
          <span @click="showTimeline = !showTimeline">{{ showTimeline ? '收起详细信息' : '展开详细信息' }}</span>
          <i
            v-show="!showTimeline"
            class="el-icon-caret-bottom"
          />
          <i
            v-show="showTimeline"
            class="el-icon-caret-top"
          />
        </span>
      </div>
      <el-timeline
        v-show="showTimeline"
        :reverse="false"
      >
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.createTime"
          :type="typeComp(activity)"
          size="large"
        >
          {{ activity.name }} [{{ activity.departName }}] {{ activity.statusShowText }}<br />
          {{ activity.remark }}
        </el-timeline-item>
      </el-timeline>
    </div>
    <div
      v-else
      class="empty-history"
    >
      <div class="icon-box">
        <i class="iconfont icon-zanwushuju" />
      </div>
      <div>
        暂无审批历史
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import {base as request} from '@/request';
import {parseTime, cloneJson} from "@/utils";
import {Step, Steps, Timeline, TimelineItem, Tooltip} from "element-ui";
import {optType, orderStatusEnum} from "../erp/ErpBusinessPage/config";
Vue.use(TimelineItem);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Timeline);
Vue.use(Tooltip);
/**
 * 审批历史列表
 * @author maolin
 */
export default {
  name: "ApproveHistory",
  props: {
    /**
     * 该值若改变则重新获取列表
     * @public
     */
    changeFlag: {
      type: Boolean,
      default: false
    },
    /**
     * 审批订单的id
     * @public
     */
    id: {
      type: [String, Number],
      default: ''
    },
    /**
     * 审批订单的类型
     * @public
     */
    type: {
      type: [String, Number],
      default: ''
    },
  },
  data () {
    return {
      showTimeline: false,
      loading: false,
      activities: []
    };
  },
  computed: {
    iconComp (item) {
      return function () {
        if (item.status === 10 || item.status === 30) {
          return 'el-icon-check';
        }
        return 'el-icon-s-order';
      };
    },
    stepsList () {
      let list = cloneJson(this.activities);
      if (list && list.length > 0) {
        let lastSubmitIndex = -1;
        for (let i in list) {
          // 获取最后一次提交的申请
          if (list[i].status === optType['SEND'].value) {
            lastSubmitIndex = i;
            list[i].icon = 'el-icon-s-order';
          }else if (list[i].status === optType['APPROVE_PENDING'].value){
            list[i].icon = 'el-icon-user';
          } else if (list[i].status === optType['REFUSE'].value){
            list[i].icon = 'el-icon-user';
          } else {
            list[i].icon = 'el-icon-user';
          }
        }
        if (lastSubmitIndex > -1) {
          let stepsList = lastSubmitIndex == 0 ? list : list.splice(lastSubmitIndex);
          let lastItem = stepsList[stepsList.length - 1];
          if (lastItem.status === optType['APPROVE_PENDING'].value || lastItem.status === optType['AGREE'].value) {
            // 增加成功节点
            stepsList.push({
              name: "申请完成",
              icon: "el-icon-circle-check"
            });
          } else {
            // 增加失败节点
            stepsList.push({
              name: "申请结束",
              icon: "el-icon-circle-close"
            });
          }
          return stepsList;
        }
      }
      return [];
    },
    activeIndex () {
      let activeIndex = 0;
      let stepsList = this.stepsList;
      // 计算当前到第几步

      // 获取哪一步开始是待审批
      let endIndex = -1;
      for (let i = 0; i < stepsList.length - 1; i ++) {
        if (stepsList[i].status === optType['APPROVE_PENDING'].value) {
          endIndex = i;
          break;
        }
      }
      // 如果以上循环都通过了，那么表示流程已经结束了，且激活的节点为最后一步
      if (endIndex === -1) {
        activeIndex = stepsList.length;
      } else {
        activeIndex = endIndex;
      }
      return activeIndex;
    },
    typeComp () {
      return function (item) {
        if (item.status === optType['AGREE'].value || item.status === optType['SEND'].value) {
          return 'success';
        } else if (item.status === optType['UNDO'].value) {
          return 'warning';
        } else if (item.status === optType['REFUSE'].value) {
          return 'danger';
        }
        return '';
      };
    }
  },
  watch: {
    changeFlag: {
      handler () {
        this.getList();
      },
      immediate: true
    }
  },
  methods: {
    /**
     * 获取列表数据
     * @public
     */
    getList () {
      this.loading = true;
      request.post('/activitiController/handleStaffList', {id: this.id, type: this.type})
        .then(res => {
          this.activities = res.data.map((item) => {
            item.createTime = parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}');
            return item;
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },

  }
};
</script>

<style lang="scss" scoped>
    $fontSize: var(--font-size);
    $primaryColor: var(--primary-color);

    .approve-history{
        border: 1px solid #e8eaec;
        padding: 20px 0;
        .show-detail{
            font-size: $fontSize;
            color: #333;
            padding: 0 0 20px 40px;
            >span{
                &:hover{
                    color: $primaryColor;
                }
            }

        }
        .description{
        }
    }
    .empty-history{
        padding: 20px 0;
        text-align: center;
        font-size: 14px;
        .icon-box{
            >i{
                font-size: 50px;
            }
        }
    }
    ::v-deep{
        .el-timeline{
            font-size: $fontSize;
        }
        .el-timeline-item__timestamp {
            font-size: $fontSize;
        }
    }
</style>
